import '@/pages/Drag/sub-components/propertyConfig/propertyConfig.less';

import {useState} from 'react';
import {
  Checkbox,Popover,Input,
} from 'antd';

import { SketchPicker }from 'react-color';

const {TextArea} = Input;

type PropsType ={
  config:any,
  onChangeCallback:Function
}

function SelectConfig(props:PropsType){
  const {config} = props;
  const [showPick1,setShowPicker1] = useState(false);
  const [showPick2,setShowPicker2] = useState(false);

  function changeStyle(key:string,val:any) {
    const data =  {...config,styles:{...config.styles,[key]:val}}
    props.onChangeCallback(data)
  }
  
  function titleRender(config:any,props:any,key:string){

    function onInputChange(e:any,key:string){
      const data = {...config,[key]:e.target.value}
      props.onChangeCallback(data);
    }
    function onCheckBoxChange(e:any){
      const data = {...config,showTit:e.target.checked};
      props.onChangeCallback(data);
    }
    return (
      <div className="item">
        <h4 className="tit"><span>*</span> 标题：</h4>
        <Input 
          value={config[key]}
          defaultValue={config[key]}
          onChange={(e)=>onInputChange(e,key)}
        />
        <Checkbox 
          style={{marginTop:'5px'}}
          checked={config.showTit}
          onChange={onCheckBoxChange} 
        >
          显示标题
        </Checkbox>
      </div>
    )
  }

  function descRender(config:any,props:any,key:string){
    function onInputChange(e:any,key:string){
      const data = {...config,[key]:e.target.value}
      props.onChangeCallback(data);
    }
    return (
      <div className="item" key={key}>
         <h4 className="tit">描述信息：</h4>
        <TextArea 
          rows={3}  
          value={config[key]}
          defaultValue={config[key]}
          onChange={(e)=>onInputChange(e,key)}
          style={{resize:'none'}}
        />
      </div>
    )
  }

  return (
    <div>     
      { titleRender(config,props,'tit')}
      { descRender(config,props,'splitDesc')}

      <div className="item">
        <h4 className="tit">样式：</h4>
        {/*  */}
        <div className="col">
          <Popover
            content={<SketchPicker color={config.styles.lineColor} onChange={(opts)=>{changeStyle('titColor',opts.hex);}}/>}
            title="修改颜色"
            trigger="click"
            visible={showPick1}
            onVisibleChange={(b)=>setShowPicker1(b)}
          >
            <div className="c1">标题颜色: <span onClick={()=>setShowPicker1(true)} className="colorBlock" style={{backgroundColor:config.styles.titColor}}></span> </div>
          </Popover>
          
          <Popover
            content={<SketchPicker color={config.styles.lineColor} onChange={(opts)=>{changeStyle('lineColor',opts.hex);}}/>}
            title="修改颜色"
            trigger="click"
            visible={showPick2}
            onVisibleChange={(b)=>setShowPicker2(b)}
          >
            <div className="c1">分割线颜色: <span onClick={()=>setShowPicker2(true)} className="colorBlock" style={{backgroundColor:config.styles.lineColor}}></span> </div>
          </Popover>
        </div>
        <div className="col">
          <Checkbox 
            checked={config.styles.dashed}
            onChange={(e)=>{
              changeStyle('dashed',e.target.checked)
            }} 
          >
            虚线
          </Checkbox>
        </div>
      </div>

    </div>
  )
}
export default SelectConfig